<template>
    <div>
        <div class="empty" v-if="(companyDataStore.currentComanyInfo?.role_id || '0') == '2'">
            <div class="iconfont icon-zanwushuju"></div>
            <span>暂无待办任务</span>
        </div>
        <template v-else>
            <div class="tab" v-if="companyDataStore.currentComanyInfo">
                <div class="item" :class="{ current: tabIndex === index }" @click="changeTab(index)"
                    v-for="(item, index) in tabs" :key="index">{{ item.label }}({{ item.count }})</div>
            </div>
            <el-table :data="list" class="table" header-row-class-name="table-header" border v-if="list.length > 0">
                <el-table-column prop="name" label="待办任务" />
                <el-table-column prop="end_time" label="截止日期" width="150" />
                <el-table-column label="操作" align="center" width="150">
                    <template #default="scope">
                        <el-button size="small" :icon="View" @click="handleCheck(scope.row)">
                            查看
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <Pagination :total="total" :current-page="pageInfo.page" :page-size="pageInfo.limit"
                @pagination-change="handlePaginationChange" v-if="list.length > 0" />
            <div class="empty" v-if="list.length === 0">
                <div class="iconfont icon-zanwushuju"></div>
                <span>暂无待办任务</span>
            </div>
        </template>
    </div>
</template>
<script lang="ts" setup>
import { GetHomeToDo, GetHomeToDoList } from '@/api/index';
import Pagination from '@/components/Pagination.vue';
import { useCompanyDataStore } from '@/store/companys';
import { View } from '@element-plus/icons-vue';
import { get } from 'lodash';
import { onMounted, reactive, ref, watch } from 'vue';
import { useRouter } from "vue-router";

const router = useRouter();
const companyDataStore = useCompanyDataStore()

const tabs = reactive([{
    label: '待我处理',
    value: 'task_count',
    count: 0
},{
    label: '未签署劳动合同',
    value: 'no_labor',
    count: 0
}, {
    label: '待转正',
    value: 'no_become',
    count: 0
}, {
    label: '劳动合同到期',
    value: 'labor_end',
    count: 0
}])
const tabIndex = ref(0)
const pageInfo = reactive({
    page: 1,
    limit: 5
})
const list = ref([])
const total = ref(0)

const handleCheck = (row: any) => {
    switch (tabIndex.value) {
        case 0:
            router.push({ name: "SigningCenter"});
            break
        case 1:
            router.push({ name: "employeeInfo", params: { id: row.id,name:'two',status:0 } });
            break
        case 2:
            router.push({ name: "employeeInfo", params: { id: row.id,name:'two',status:0 } });
            break
        case 3:
            router.push({ name: "employeeInfo", params: { id: row.id,name:'two',status:0 } });
            break
    }
}

const getData = async () => {
    await GetHomeToDo().then(res => {
        tabs[0].count = get(res, 'data.task_count', 0)
        tabs[1].count = get(res, 'data.no_labor', 0)
        tabs[2].count = get(res, 'data.no_become', 0)
        tabs[3].count = get(res, 'data.labor_end', 0)
    })
}

const getToDoList = async () => {
    await GetHomeToDoList({
        type: tabs[tabIndex.value].value,
        page: pageInfo.page,
        limit: pageInfo.limit
    }).then(res => {
        list.value = res.data.data
        total.value = res.data.count
    })
}

const handlePaginationChange = ({ page, size }: { page: number; size: number }) => {
    pageInfo.page = page
    pageInfo.limit = size
    list.value = []
    getToDoList()
}

const changeTab = (index: number) => {
    tabIndex.value = index
    list.value = []
    pageInfo.page = 1
    getToDoList()
}

const reset = () => {
    tabIndex.value = 0
    pageInfo.page = 1
    list.value = []
    getToDoList()
}

onMounted(async () => {
    await getData()
    await getToDoList()
})

watch(
    () => companyDataStore.currentComanyInfo,
    (newCompany) => {
        if (newCompany) {
            getData()
            reset()
        }
    },
    { deep: true }
)
</script>
<style lang="scss" scoped>
.tab {
    display: flex;
    margin-bottom: 20px;

    .item {
        height: 29px;
        border: solid 1px #ededed;
        border-radius: 5px;
        line-height: 29px;
        padding: 0 7px;
        color: #666;
        margin-right: 7px;
        cursor: pointer;
        font-size: 14px;

        &.current {
            border-color: #005ba8;
            color: #005ba8;
        }
    }
}

.empty{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 200px;

    .iconfont{
        color: #c7c7c7;
        font-size: 60px;
    }

    span{
        font-size: 14px;
        margin-top: 10px;
        color: #999;
    }
}
</style>